import React, { Component } from 'react';
import { Toast, Form, Input, Button } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'


import '../../styles/Register/pwd.scss'
import styles from '../../styles/Register/pwd.scss'
import * as service from '../../api/index'
import jdpass from '../../assets/jdpass.png'

class pwd extends Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            disable: true

        }
    }

    fromRef = React.createRef()

    async passcode() {//设置密码
        var tel = this.props.location.state.tel//保存通过注册index页面跳转传过来的注册手机号
        console.log(this.props.location.state.tel)
        const fromdata = this.fromRef.current.getFieldsValue()//组件表单获取到的输入的密码
        var res = await service.user_dofinishregister({ tel, password: fromdata.password })
        console.log(res);
        if (res.data.code == 200) {//注册成功跳转至登录页面
            Toast.show({
                content: res.data.message,
                duration: 1000,
            })
            this.props.history.push({ pathname: '/login' })
        } else {//注册失败提示
            Toast.show({
                content: res.data.message,
                duration: 1000,
            })
        }

    }

    setVisible() {//控制显示密码状态
        this.setState({ visible: !this.state.visible })
    }
    PasswordValidator = (_, value) => {//确认密码校验
        if (value) {
            let reg = /^\d{6,}$/;
            if (reg.test(value)) {
                this.setState({
                    loginname: value
                })
                return Promise.reject(this.setState({ disable: false }));
            }
            return Promise.reject(new Error('密码不符合格式要求'), this.setState({ disable: true }));
        } else {
            return Promise.reject(new Error('密码不能为空'), this.setState({ disable: true }));
        }

    }
    render() {
        return (
            <div className='pwd'>
                <div className="main">
                    <div className="mainbox">
                        <div className="img">
                            <img src={'https://img95.699pic.com/xsj/0z/vn/va.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast'} alt="" />
                        </div>
                        <div className="text">
                            请设置你的登录密码
                        </div>
                    </div>
                    <Form layout='horizontal'  ref={this.fromRef}
                        footer={
                            <Button disabled={this.state.disable} block color='primary' size='middle' shape='rounded' onClick={() => { this.passcode() }}>
                                完成
                            </Button>
                        }
                    >
                        <Form.Item
                            name='password'
                            extra={
                                <div className={styles.eye}>
                                    {!this.state.visible ? (
                                        <EyeInvisibleOutline onClick={() => this.setVisible()} />
                                    ) : (
                                        <EyeOutline onClick={() => this.setVisible()} />
                                    )}
                                </div>
                            }
                            rules={[{ validator: this.PasswordValidator }]}
                        >
                            <Input
                                placeholder='请输入至少6位数的密码'
                                clearable
                                type={this.state.visible ? 'text' : 'password'}
                            />
                        </Form.Item>
                    </Form>
                    <div className="textcode">
                        密码强度校验，最少6位，包括至少1个大写字母，1个小写字母，1个数字
                    </div>
                </div>

            </div>
        );
    }
}

export default pwd;
